<template>
    <h2>tree</h2>
    <!-- props:用来实现tree控件的配置，指定给tree控件提供数据的对象的key
         data:提供tree控件节点数据，数据的定义需要符合props的配置
         show-checkbox 是否选项否选框
         node-key:需要唯一一般使用id
      -->
    <el-tree
        :props="props"
        :data="treeNodeList"
        show-checkbox
        node-key="id"
        ref="treeRef"
        @node-click="hanldNodeClick"
        @check-change="hanldNodeChange"
    />
  
  
  
  </template>
  
  <script setup>
  
    import {reactive, ref} from "vue";
    //定义tree控件的配置参数
    const props={
      id:'id',
      label:'name',
      children:'zones'
    };
    //定义tree控件上需要显示的节点数据
    const treeNodeList=ref([
        {id:1,name:'档案管理',zones:[
            {id:2,name:'档案录入',zones:[]},{id:3,name:'档案检索',zones:[]}]},
        {id:4,name:'班级管理',zones: [
            {id:5,name:'添加班级',zones: []},{id:6,name:'班级调整',zones:[]}]}
    ]);
    //tree节点的单机事件处理函数,x表单当前点击的tree节点对象
    function hanldNodeClick(x){
      console.log("--------------");
      console.log(x);
    }
  
    const treeRef=ref(null);
    /*定义tree控件复选框选中状态发生变化的时候回调函数*/
    function hanldNodeChange(x,y,z){
    //   console.log(x);
    //   console.log(y);
    //   console.log(z);
      let nodes = treeRef.value.getCheckedNodes(true);
      console.log(nodes);
    //   nodes.forEach((item)=>{ //item表单选中的节点对象
  
    //     console.log(treeRef.value.getNode(item).parent);
    //   })
    }
  
  
  
  </script>
  
  <style scoped>
  
  </style>